<template>
  <div class="icons-container">
    <el-tabs type="border-card">
      <el-tab-pane label="Icons">
        <div class="grid">
          <div
            v-for="item of svg_icons"
            :key="item"
            @click="handleClipboard(generateIconCode(item), $event)"
          >
            <el-tooltip
              effect="dark"
              :content="generateIconCode(item)"
              placement="top"
            >
              <div class="icon-item">
                <svg-icon :icon-class="item" />
                <span>{{ item }}</span>
              </div>
            </el-tooltip>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Element-UI Icons">
        <div class="grid">
          <div
            v-for="(icon, name) of icons"
            :key="name"
            @click="handleClipboard(generateElementIconCode(name), $event)"
          >
            <el-tooltip
              effect="dark"
              :content="generateElementIconCode(name)"
              placement="top"
            >
              <div class="icon-item">
                <el-icon :size="20">
                  <component :is="icon" />
                </el-icon>
                <span>{{ name }}</span>
              </div>
            </el-tooltip>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

defineOptions({
  // eslint-disable-next-line
  name: 'Icons',
  inheritAttrs: false,
  mounted() {
    console.log('mounted(){')
  }
})
const svg_icons: string[] = [
  'api-api_index',
  'api-captcha',
  'api-index-captcha',
  'api',
  'cascader',
  'client',
  'close',
  'close_all',
  'close_left',
  'close_other',
  'close_right',
  'dict',
  'document',
  'download',
  'drag',
  'edit',
  'exit-fullscreen',
  'eye-open',
  'eye',
  'fullscreen',
  'github',
  'homepage',
  'language',
  'link',
  'menu',
  'message',
  'money',
  'monitor',
  'order',
  'password',
  'peoples',
  'perm',
  'publish',
  'role',
  'security',
  'size',
  'skill',
  'system',
  'tree',
  'user',
  'uv',
  'verify-code'
]
const icons = ref(ElementPlusIconsVue)

const { copy } = useClipboard()

function generateIconCode(symbol: any) {
  return `<svg-icon icon-class="${symbol}" />`
}

function generateElementIconCode(symbol: any) {
  return `<el-icon><${symbol} /></el-icon>`
}

function handleClipboard(text: any, event: any) {
  // clipboard(text, event);
  copy(text)
    .then(() => {
      ElMessage.success('Copy successfully')
    })
    .catch(() => {
      ElMessage.warning('Copy failed')
    })
}
</script>

<style lang="scss" scoped>
.icons-container {
  margin: 10px 20px 0;
  overflow: hidden;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .icon-item {
    float: left;
    width: 100px;
    height: 85px;
    margin: 20px;
    font-size: 30px;
    color: var(--el-text-color-regular);
    text-align: center;
    cursor: pointer;
  }

  span {
    display: block;
    margin-top: 10px;
    font-size: 16px;
  }

  .disabled {
    pointer-events: none;
  }
}
</style>
